<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<title>意见反馈</title>
	<link rel="stylesheet" type="text/css" href="../css/iconfont.css">
	<link rel="stylesheet" type="text/css" href="../css/fankui.css">
	<script type="text/javascript" src="../js/rem2.js"></script>
</head>
<body>
	<div class="wrap">
		<!-- 头部 -->
		<div class="header">
			<label class="header_left"><img src="../img/w_nav_back.png"></label>
			<div class="header_title">意见反馈</div>
		</div>
		<!-- 头部 -->
		<div class="content">
			<div class="item">
				<span class="name">反馈类型</span>
				<i class="iconfont icon-ic_chevron_right_px"></i>
				<span class="type">意见类型</span>
			</div>
			<div class="input">
				<textarea placeholder="请输入产品意见,我们将不断改善优化"></textarea>
				<span>/100</span><span class="total">1</span>
			</div>
			<div class="beizhu">
				<input type="text" name="" placeholder="请输入您的手机号码/邮箱(选填)">
			</div>
			<div class="btn">提交</div>
		</div>
		<div class="mask">
			<div class="mask_content">
				<div class="con_head">
					<h4>请选择反馈类型</h4>
					<i class="iconfont icon-close"></i>
				</div>
				<div class="ms_item">
					<i class="iconfont yuan icon-yuan-copy"></i>
					<span class="name">产品问题</span>
				</div>
				<div class="ms_item">
					<i class="iconfont yuan icon-yuan-copy"></i>
					<span class="name">支付问题</span>
				</div>
				<div class="ms_item">
					<i class="iconfont yuan icon-yuan-copy"></i>
					<span class="name">配送问题</span>
				</div>
				<div class="ms_item">
					<i class="iconfont yuan icon-yuan-copy"></i>
					<span class="name">售后问题</span>
				</div>
				<div class="button">提交</div>
			</div>
		</div>
		<div class="mask_s">
			<div class="ms_content">
				<i class="iconfont icon-smile"></i>
				<p>意见反馈成功!</p>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var type = document.querySelector(".type");
	var mask = document.querySelector(".mask");
	var close = document.querySelector(".icon-close");
	var mask_s = document.querySelector(".mask_s");
	var ms_item_s = document.querySelectorAll(".ms_item");
	var botton = document.querySelector(".button");
	close.addEventListener("click",function(){
		mask.style.display="none"
	})
	type.addEventListener("click",function(){
		mask.style.display="block"
		run()
	});
	function run(){
		let i_s = document.querySelectorAll(".yuan");
		
		for(var i=0;i<ms_item_s.length;i++){
			(function(a){
				ms_item_s[a].addEventListener("click",function(){
					if(a==0){
						i_s[a].classList.add("icon-gouSolid");
						i_s[a].classList.remove("icon-yuan-copy");
						i_s[1].classList.remove("icon-gouSolid");
						i_s[2].classList.remove("icon-gouSolid");
						i_s[3].classList.remove("icon-gouSolid");
						i_s[1].classList.add("icon-yuan-copy");
						i_s[2].classList.add("icon-yuan-copy");
						i_s[3].classList.add("icon-yuan-copy");
					}else if(a==1){
						i_s[a].classList.add("icon-gouSolid");
						i_s[a].classList.remove("icon-yuan-copy");
						i_s[0].classList.remove("icon-gouSolid");
						i_s[2].classList.remove("icon-gouSolid");
						i_s[3].classList.remove("icon-gouSolid");
						i_s[0].classList.add("icon-yuan-copy");
						i_s[2].classList.add("icon-yuan-copy");
						i_s[3].classList.add("icon-yuan-copy");
					}else if(a==2){
						i_s[a].classList.add("icon-gouSolid");
						i_s[a].classList.remove("icon-yuan-copy");
						i_s[0].classList.remove("icon-gouSolid");
						i_s[1].classList.remove("icon-gouSolid");
						i_s[3].classList.remove("icon-gouSolid");
						i_s[0].classList.add("icon-yuan-copy");
						i_s[1].classList.add("icon-yuan-copy");
						i_s[3].classList.add("icon-yuan-copy");
					}else if(a==3){
						i_s[a].classList.add("icon-gouSolid");
						i_s[a].classList.remove("icon-yuan-copy");
						i_s[0].classList.remove("icon-gouSolid");
						i_s[1].classList.remove("icon-gouSolid");
						i_s[2].classList.remove("icon-gouSolid");
						i_s[0].classList.add("icon-yuan-copy");
						i_s[1].classList.add("icon-yuan-copy");
						i_s[2].classList.add("icon-yuan-copy");
					}
				})
			})(i)
		}
		return i_s
	}
	botton.addEventListener("click",function(){
		var arr = run()
		mask.style.display="none";
		console.log(arr)
		for(var j =0 ;j<arr.length;j++){
			if(arr[j].className=="iconfont yuan icon-gouSolid"){
				// console.log(arr[j].nextElementSibling.innerText)
				type.innerText=arr[j].nextElementSibling.innerText
			}
		}
	})
</script>
<script type="text/javascript">
	var total = document.querySelector(".total");
	var txt = document.querySelector("textarea");
	var back = document.querySelector(".header_left");
	txt.addEventListener("keyup",function(){
		if(txt.value.length==0){
			total.innerText=1;

		}else if(txt.value.length>100){
			txt.value=txt.value.slice(0, 99);
			total.innerText=100
		}else{
			total.innerText=txt.value.length+1
		}
		// console.log(txt.value.length)
		
	})
	var btn = document.querySelector(".btn");
	btn.addEventListener("click",function(){
		mask_s.style.display="block";
		var time = setTimeout(function(){
			mask_s.style.display="none"
		},1000)
	});
	back.addEventListener("click",function(){
		window.history.go(-1);
	})
</script>
</html>